<style lang="less" scoped>
  .keyfit-technology{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: ~'calc(100% - 45px)';
    }
  }
</style>

<template>
  <div class="keyfit-technology">
    <div class="keyfit-technology_title">
      <span>{{ keyFitTitle }}</span>
    </div>
    <div id="technology" class="keyfit-technology_content">1</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCABGMonth, getStrokeSurgeryMonth, getTraumaFirstAidMeasureMonth } from '@/api/comprehensive/keyfitTechnology'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null,
      keyFitTitle: '技术开展例数及占比'
    }
  },
  watch: {
    'isStrock'(val) {
      this.getTechnology()
    }
  },
  mounted() {
    const _this = this
    this.getTechnology()
    this.setInter = setInterval(() => {
      _this.getTechnology()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    getTechnology() {
      const myChart = echarts.init(document.getElementById('technology'))
      // myChart.clear()
      myChart.hideLoading()
      window.addEventListener('resize', myChart.resize)
      const timeData = []
      const PPCIData = []
      const PCIData = []
      const RSData = []
      const ZGZLData = []
      const CEAData = []
      if (this.isStrock == 'chestPain') {
        this.keyFitTitle = '技术开展例数及占比'
        getCABGMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                timeData.push(el.timeName ? el.timeName : '')
                PPCIData.push(el.countPPCI ? el.countPPCI : 0)
                PCIData.push(el.countTPCI ? el.countTPCI : 0)
                RSData.push(el.countNeedle ? el.countNeedle : 0)
                ZGZLData.push(el.pctCABG ? el.pctCABG : 0)
              })
            }
            if (timeData.length === 0) {
              myChart.clear()
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            } else {
              const option = {
                color: ['#FFD300', '#01EEF6', '#59BCFB', '#F0657A'],
                legend: {
                  type: 'plain',
                  top: 0,
                  icon: 'circle',
                  textStyle: {
                    color: '#fff'
                  },
                  formatter: function(name) {
                    return name
                  }
                },
                xAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  data: timeData
                },
                yAxis: [{
                  name: '（人数）',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }, {
                  name: '（占比）',
                  type: 'value',
                  min: 0,
                  max: 100,
                  interval: 20,
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: 'fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }],
                tooltip: {
                  trigger: 'axis',
                  textStyle: {
                    color: '#00F6FF'
                  },
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#999'
                    }
                  },
                  formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}'
                },
                series: [
                  {
                    name: 'PPCI',
                    barWidth: 10,
                    data: PPCIData,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    type: 'bar'
                  },
                  {
                    name: '转运PCI',
                    barWidth: 10,
                    data: PCIData,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    type: 'bar'
                  },
                  {
                    name: '溶栓',
                    barWidth: 10,
                    data: RSData,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    type: 'bar'
                  },
                  {
                    name: '再灌注率',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 1,
                    label: {
                      formatter: '{c}%',
                      show: true,
                      color: '#fff',
                      position: 'top'
                    },
                    data: ZGZLData
                  }
                ]
              }
              myChart.setOption(option)
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        this.keyFitTitle = '关键适宜技术例数'
        getStrokeSurgeryMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                timeData.push(el.timeName)
                PPCIData.push(el.countThrom)
                PCIData.push(el.countIntervention)
                RSData.push(el.countHemorrhage)
                ZGZLData.push(el.countAneurysm)
                CEAData.push(el.countCEACAS)
              })
              const option = {
                color: ['#59BCFB', '#01EEF6', '#00D59D', '#FFD300', '#FA9B00'],
                legend: {
                  type: 'plain',
                  top: 0,
                  icon: 'circle',
                  textStyle: {
                    color: '#fff'
                  },
                  formatter: function(name) {
                    return name
                  }
                },
                xAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  data: timeData
                },
                yAxis: [{
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }],
                tooltip: {
                  trigger: 'axis',
                  textStyle: {
                    color: '#00F6FF'
                  },
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#999'
                    }
                  },
                  formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}'
                },
                series: [
                  {
                    name: 'AIS静脉溶栓例数',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: PPCIData,
                    type: 'bar'
                  },
                  {
                    name: 'AIS血管内治疗例数',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: PCIData,
                    type: 'bar'
                  },
                  {
                    name: '脑出血手术例数',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: RSData,
                    type: 'bar'
                  },
                  {
                    name: '颅内动脉瘤手术例数',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: ZGZLData,
                    type: 'bar'
                  },
                  {
                    name: 'CEA/CAS手术例数',
                    barWidth: 10,
                    data: CEAData,
                    type: 'bar'
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.clear()
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      } else if (this.isStrock == 'trauma') {
        this.keyFitTitle = '急救措施开展情况'
        getTraumaFirstAidMeasureMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                timeData.push(el.timeName)
                PPCIData.push(el.countClosedThoracicDrainage)
                PCIData.push(el.countArtificialAirway)
                RSData.push(el.countBloodTransfusion)
                ZGZLData.push(el.countInjuryControlSurgery)
              })
              const option = {
                color: ['#59BCFB', '#01EEF6', '#00D59D', '#FFD300', '#FA9B00'],
                legend: {
                  type: 'plain',
                  top: '10px',
                  bottom: 0,
                  icon: 'circle',
                  textStyle: {
                    color: '#fff'
                  },
                  formatter: function(name) {
                    return name
                  }
                },
                xAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  data: timeData
                },
                yAxis: [{
                  type: 'value',
                  name: '（例数）',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                }],
                tooltip: {
                  trigger: 'axis',
                  textStyle: {
                    color: '#00F6FF'
                  },
                  axisPointer: {
                    type: 'cross',
                    crossStyle: {
                      color: '#999'
                    }
                  },
                  formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}'
                },
                series: [
                  {
                    name: '胸腔闭式引流',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: PPCIData,
                    type: 'bar'
                  },
                  {
                    name: '人工气道',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: PCIData,
                    type: 'bar'
                  },
                  {
                    name: '输血',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: RSData,
                    type: 'bar'
                  },
                  {
                    name: '损伤性控制手术',
                    barWidth: 10,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    data: ZGZLData,
                    type: 'bar'
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      }
    }
  }
}
</script>
